<!--
作者：黄涛
时间：2021-02-04
描述：外来用户app 入场登记
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="css/body.css?1">
		<title>入场登记</title>
		<style>
			.form-item{border-bottom:1px solid rgba(228, 228, 228, 1);margin:10px 0;
			display: flex;flex-wrap:wrap;}.p-form{padding:2vh 6.5%;}
			.form-item span{font-size: 14px;}
			.form-item span:nth-child(1){width:62px;text-align-last: justify;color:#666;}
			.form-item span:nth-child(2){width:calc(100% - 62px);}
			.form-item input{background:none;border:none;color:rgb(153, 153, 153);
			margin:0;border-radius: 0;}
			.form-item input,.form-item span,.form-item{height:40px;line-height: 40px;}
			.form-item input{font-size: 14px; font-weight: 400; color:#555;height:38px;line-height: 38px;}
			.mui-radio{display: flex;}.mui-radio input[type=radio]{transform: scale(.7);position: relative;right:0;margin-right: 15px;}
			.mui-icon-arrowright{position: relative;}
			.mui-icon-arrowright:before{ position: absolute;right:0;color: #bbb;font-size: 22px;}
			.p-sendcode{position: relative;}.p-qrts{width: 100%;display: flex;
			justify-content: center;}.p-qrts font{width:40px;height:25px;line-height: 25px;
			background:rgba(242, 242, 242, 1);text-align: center;}
			.p-qrts font:nth-child(2){border-left: 1px solid rgba(215, 215, 215, 1);border-right:1px solid rgba(215, 215, 215, 1);}
			.mui-btn-primary{position: absolute;right:0;}
			.p-qrts font{color: #aaa;font-size: 12px;}.p-qrts font.on{background: #04AF00;color: #fff;}
			.p-text{border:none;display: inline-block;width:100%;margin:0;}.p-text textarea{width:100%;height:6vh;font-size: 13px;border: 0;padding:0;
			color:#777;}.p-qrh{font-size: 13px;color:#333;border:0;}.p-qrh a{color:#02A7F0;}
			.mui-checkbox input[type=checkbox]{position: inherit;transform: scale(.7);display: inline-table;}
			.mui-checkbox.mui-left input[type=checkbox]{left:0;top: 2px;}
			.mui-checkbox.mui-left{margin-left:-10px;}
			.p-form .p-text span{display: block;width:100%;text-align-last:left;}
			.p-btn{margin:10px 0;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">登记记录</h1>
		</header>
		<div class="mui-content" id="page">
			<div class="p-form">
				<div class="form-item p-noborder">
					<span>姓名</span><span>&nbsp;&nbsp;&nbsp;&nbsp;{{form.compellation}}</span>
				</div>
				<div class="form-item p-noborder">
					<span>性别</span><span v-if="form.sex && form.sex == 2">&nbsp;&nbsp;&nbsp;&nbsp;女</span>
					<span v-else>&nbsp;&nbsp;&nbsp;&nbsp;男</span>
				</div>
				<div class="form-item p-noborder">
					<span>身份证</span><span>&nbsp;&nbsp;&nbsp;&nbsp;{{form.idCard}}</span>
				</div>
				<div class="form-item p-noborder">
					<span>手机号</span><span>&nbsp;&nbsp;&nbsp;&nbsp;{{form.phone}}</span>
				</div>
				<div class="form-item" v-if="form.hasUnit==1">
					<span>所属单位</span><span class="mui-icon mui-icon-arrowright"><input @click.stop="getEnterprise" readonly v-model="form.enterpriseName" type="text" placeholder="选择或填写 所属公司/部门"></span>
				</div>
				<div class="form-item">	
					<span>参与项目</span><span class="mui-icon mui-icon-arrowright"><input type="text" @click.stop="getProject" readonly v-model="form.currentProjectName" placeholder="选择或填写 项目/场站？"></span>
				</div>
				<div class="form-item">	
					<!-- <span>入场时间</span><span><input readonly data-options="{}" v-model="form.approachTime" @click.stop="chooseTime($event)" type="text" placeholder="请选择入场时间"></span> -->
					<span>入场时间</span><span>&nbsp;&nbsp;&nbsp;&nbsp;{{getCurDate()}}</span>
				</div>
				<div class="form-item p-text">
					<span>工作内容</span><span><textarea @click.stop="" v-model="form.content" class="" placeholder="*请简单描述，进入场站要做的工作内容"></textarea></span>
				</div>
				<div class="form-item p-qrh">
					<div class="mui-input-row mui-checkbox mui-left"><input name="checkbox1" v-model="dis" type="checkbox" @change="checkboxChange">我已阅读<a href="javascript:;" @click="xuzhi">《外来人员入场登记须知》</a></div>
				</div>
				<div class="p-btn" @click="submit">提交登记</div>
			</div>
			
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery-3.2.1.min.js"></script>
	<script src="../js/mkeyplus.base.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/mui.picker.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
	<script type="text/javascript" src="../../../js/vue.js"></script>
	
	<script src="js/api.js?1"></script>
	<script>
		mui.init();
		var htapi = new HTGlobal();
		//避免重复绑定
		var selectEnterprise = function(data){
			return htapi.eventSelectEnterprise.call(htapi,data);
		}
		window.removeEventListener('eventSelectEnterprise',selectEnterprise);
		window.addEventListener('eventSelectEnterprise',selectEnterprise);
		var page = new Vue({
			el: '#page',
			data:{
				form:{
					appUserId:"",//app外来人用户id
					compellation:"",////姓名
					sex:"",//性别1:男2：女
					idCard:"",//身份证
					phone:"",//手机号
					enterpriseId:'',//单位ID
					enterpriseName:'',//单位名称
					// approachTime:'',//进场时间
					projectId:"",//项目ID
					currentProjectName:'',//项目名称
					enterpriseProjectId:'',
					content:"",//工作内容
					currentProjectId:'',
					hasUnit:1,
					areaId:'',
					stationId:''
				},dis:false
			},
			methods:{
				getCurDate(){
					var date = new Date()
					var year = date.getFullYear()
						
					/* 在日期格式中，月份是从0开始的，因此要加0
					 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
					 * */
					var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
					var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
					var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
					var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
					var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
					// 拼接
					return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
				},
				checkboxChange(){
					var fromNotice = localStorage.getItem('fromNotice');
					if(!fromNotice){
						this.dis = false;
						mui.toast('请确认阅读了《外来人员入场登记须知》');
					}else{
						this.form = JSON.parse(fromNotice);
						this.form.appUserId=localStorage.getItem('outUserId')
					}
				},
				getAdmissionNotice(){
					//调取入场需知
					var ff = this.form;
					var pid = ff.currentProjectId;
					
					if(!pid){
						mui.toast('请先选择参与的项目！');
						return false;
					}
					if(this.vrform())
					htapi.admissionNotice(pid,function(data){
						console.log('......data',JSON.stringify(data));
						return;
						if(data.code == '0'){
							var _form = JSON.parse(JSON.stringify(ff));
							_form.data = data.data;
							mui.openWindowWithTitle({
							  url: '../home/notice.html',
							  id: './notice.html',
							  extras: {
								form: _form
							  }
							},
							{
								id:'title',
								height: "44px",
								backgroundColor: "#275EB1",
								bottomBorderColor: "#cccccc",
								title: {
									text:'入场须知',
									position:{
										top:'3px'
									},
									styles:{
										size: "17px",
										weight:'bold',
										align: "center",
										color:'#fff'
									}
								},
								back: {
									image: {
										base64Data:'',
										sprite: {
											top:'0px',
											left:'0px',
											width: "100%",
											height: "100%"
										},
										position: {
											top:'16px',
											left:'8px',
											width: "20px",
											height: "20px"
										}
									},
									click: function() {
										mui.fire(plus.webview.getWebviewById('./notice.html'), 'fromPageBackEvent');
									}
								}});
						}
					})
				},
				vrform(){
					var checkIdCard = function(str){
						if(str=='' || str.length<7 || str.length>18){
							return false;
						}else if(str.length<18){
							return /^p\d{6}$/i.test(str);
						}
						return true;
					};
					var t=this,form = t.form;
					if(form.compellation==''){
					    mui.toast('请输入姓名');
					    return false;
					}
					if(form.sex==''){
					    mui.toast('请选择性别');
						form.sex = 1;
					    //return false;
					}
					if(!htapi.checkIdCard(form.idCard)){
						//mui.toast('请输入正确的身份证号');
						//return false;
					}
					if(!checkIdCard(form.idCard)){
					    //mui.toast('请输入正确的身份证号或集团工号！');
					    //return false;
					}
					if(form.enterpriseId==''&& form.hasUnit==1){
					    mui.toast('请选择所属单位');
					    return false;
					}
					form.projectId = form.currentProjectId;
					if(form.projectId==''){
					    mui.toast('请选择所属项目');
					    return false;
					} 
					if (!(/^1[3456789]\d{9}$/.test(form.phone))) {
					  mui.toast('请输入正确的手机号');
					  return false; 
					}
					if(form.content==''){
					    mui.toast('请输入工作内容');
					    return false;
					}
					// if(!form.approachTime){
					// 	mui.toast('请选择入场时间！');
					// 	return false;
					// }
					return true;
				},
				xuzhi(){
					//登记需知
					this.getAdmissionNotice()
				},
				getEnterprise(){
					htapi.enterpriseSearch(this.form);
					//htapi.getEnterpriseList(this.form)
				},
				getProject(){
					//业务逻辑已改切换项目不用在此切换了，在关联项目中切换
					return;
					htapi.getProjectList(this.form)
				},
				chooseTime(e){
					var t = e.currentTarget;
					var optionsJson = t.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = t.getAttribute('id');
					if(t.picker) {
						t.picker.show(function (rs) {
							t.picker.dispose();
							t.picker = null;
						});
					} else {
						t.picker = new mui.DtPicker(options);
						t.picker.show(function(rs) {
							page.form.approachTime=rs.text
							t.picker.dispose();
							t.picker = null;
						});
					}
					return false;
				},
				timestamp(time){
				  time = time.replace(/-/g,"/");	
				  var date = new Date(time);
				  var str = Date.parse(date);
				  return str;
				},
				submit(){
					if(!this.vrform()) return;
					var t=this,form = t.form;
					if(!t.dis){
						mui.toast('请确认阅读了《外来人员入场登记须知》');
						return false;
					}
					// var approachTime = form.approachTime;
					// form.approachTime=t.timestamp(form.approachTime);
					//console.log(JSON.stringify(form));return;
					
					var user = localStorage.getItem('outUser');
					user = JSON.parse(user);
					htapi.registration(form,function(res){
						if(res.code=='0'){
							//更新 outUser 
							user.enterpriseProjectId = form.enterpriseProjectId;
							user.enterpriseName = form.enterpriseName;
							user.enterpriseId = form.enterpriseId;
							user.currentProjectName = form.currentProjectName;
							user.projectId = form.projectId;
							user.currentProject = form.currentProject;
							user.currentProjectId = form.currentProjectId;
							user.notice = 1;
							localStorage.setItem("outUser", JSON.stringify(user));
							
							Object.keys(form).forEach(function(key){
								form[key] = '';
							});
							mui.alert('您已登记成功！','提示',function(){
								var page = plus.webview.getWebviewById('../record/index.html');
								mui.fire(page, 'update');
								plus.webview.currentWebview().close();
							});
						}else{
							mui.toast(res.msg);
							console.log('error',JSON.stringify(res));
						}
					});
					localStorage.removeItem('fromNotice');
					// form.approachTime=approachTime;
				}
			},
			created(){
			/** vue初始化加载
			 * @method created
			 * @param{空}
			 * @return {空} 
			*/ 
				var user=JSON.parse(localStorage.getItem('outUser'));
				var t = this;
				if(user){
					Object.keys(t.form).forEach(function(key){
						var value = (user[key]==0 || user[key]) ? user[key] : '';
							t.$set(t.form,key,user[key])
					});
					
				}
				console.log(localStorage.getItem('outUser'));
			}
		});
	</script>
</html>

